<template>
  <div class="w-full h-full flex flex-col bg-gray-100">
    <n-card>
      <n-form
          inline
          :label-width="80"
          label-placement="left"
          :model="formValue"
          :rules="rules"
          :size="size"
          ref="formRef"
      >
        <n-grid x-gap="12" :cols="4">
          <n-gi>
            <n-form-item label="姓名" path="name" class="w-200px">
              <n-input v-model:value="formValue.name" placeholder="输入姓名"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="年龄" path="age" class="w-200px">
              <n-input placeholder="输入年龄" v-model:value="formValue.age"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item label="电话号码" path="phone" class="w-200px">
              <n-input placeholder="电话号码" v-model:value="formValue.phone"/>
            </n-form-item>
          </n-gi>
          <n-gi>
            <n-form-item class="w-200px">
              <n-button-group>
                <n-button @click="searchFunc">
                  <n-icon>
                    <Search32Filled></Search32Filled>
                  </n-icon>
                  查询
                </n-button>
                <n-button @click="resetFunc">
                  <n-icon>
                    <ArrowReset32Filled></ArrowReset32Filled>
                  </n-icon>
                  重置
                </n-button>
                <n-button @click="createFunc">
                  <n-icon>
                    <Add16Filled></Add16Filled>
                  </n-icon>
                  新建
                </n-button>
              </n-button-group>
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-form>
    </n-card>
    <div class="flex-1 overflow-hidden w-full">
      <n-card class="w-full h-full">
        <flextable :column.sync="columns" :tabledata="tabledata"></flextable>
      </n-card>
    </div>
    <div class="w-full juzhong1 my-2">
      <fenye @change="getDataList" ref="fenyeref" :total="total"></fenye>
    </div>
    <Model ref="modalref" @shuaxin="shauxin"></Model>
    <addUserModel ref="addUserref"></addUserModel>
    <addMenuModel ref="addMenuref"></addMenuModel>
  </div>
</template>

<script setup name="rolemanager">
import addUserModel from "./addUserModel.vue"

import addMenuModel from "./addMenuModel.vue"
import {h} from "vue"
import {useRoute, useRouter} from "vue-router";
import {Add16Filled, ArrowReset32Filled, Search32Filled} from "@vicons/fluent"
import {NButton, NAvatar, useDialog, useMessage} from "naive-ui"
import http from "@/request/request"
import guiling from "@/util/guiling"
import Model from "./model.vue"
const router = useRouter()
const route = useRoute()
const dialog = useDialog()
const message = useMessage()
const formRef = ref(null)
const fenyeref = ref(null)
const modalref = ref(null)
const addUserref = ref(null)
const addMenuref = ref(null)
//表单数据
const formValue = ref({})
const rules = ref({})
const size = ref("medium")
const tabledata = ref([
  {"ad": "123"},
])
const total = ref(0)
const columns = ref([
  {
    title: "序号", key: "index", width: 60, show: true, render: (rowData, rowIndex) => {
      return rowIndex + 1
    }
  },
  {title: "名称", key: "name", show: true},
  {title: "描述", key: "desc", show: true},
  {
    title: "创建时间", key: "jg", show: true, render: (rowData, rowIndex) => {
      return h("span", null, {
        default() {
          if (rowData.createdTime) {
            return new Date(rowData.createdTime).toLocaleString("zh", {
              year: 'numeric',
              month: 'numeric',
              day: 'numeric',
              hour12: false,
              hour: 'numeric',
              minute: 'numeric',
              second: 'numeric'
            })
          } else {
            return ""
          }
        }
      })
    }
  },
  {
    title: "更新时间", key: "u", show: true, render: (rowData, rowIndex) => {
      return h("span", null, {
        default() {
          if (rowData.changeTime) {
            return new Date(rowData.changeTime).toLocaleString("zh", {
              year: 'numeric',
              month: 'numeric',
              day: 'numeric',
              hour12: false,
              hour: 'numeric',
              minute: 'numeric',
              second: 'numeric'
            })
          } else {
            return ""
          }
        }
      })
    }
  },
  {
    title: "关联菜单", key: "view", width: 100, show: true, render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {
          size: "small", class: {"mx-1": true}, type: "info", onclick: () => {
            handleMenu(rowData)
          },
        }, {
          default: () => {
            return "关联菜单"
          }
        }),
      ])
    }
  },
  {
    title: "关联人员", key: "more", width: 100, show: true, render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {size: "small", class: {"mx-1": true},type: "info",onClick: ()=>{handleWorker(rowData)}}, {
          default: () => {
            return "关联人员"
          }
        }),
      ])
    }
  },
  {
    title: "编辑", key: "edit", width: 60, show: true, render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {
          size: "small", class: {"mx-1": true}, type: "info", onclick: () => {
            handleEdit(rowData, "edit")
          },
        }, {
          default: () => {
            return "编辑"
          }
        }),
      ])
    }
  },
  {
    title: "删除", key: "del", width: 60, show: true, render: (rowData, rowIndex) => {
      return h("div", {}, [
        h(NButton, {
          size: "small", class: {"mx-1": true}, type: "error", onclick: () => {
            handleDelete(rowData)
          }
        }, {
          default: () => {
            return "删除"
          }
        }),
      ])
    }
  },
])
// 点击关联菜单
const handleMenu=(data)=>{
  addMenuref.value.init(data)
}
// 点击关联人员
const handleWorker=(data)=>{
  addUserref.value.init(data)
}
// 点击编辑
const handleEdit=(data)=>{
  modalref.value.init("edit",{...data})
}

// 点击删除
let deletemodel = inject("deletemodel")
const handleDelete=(item)=>{
  deletemodel(refreshdelete,http.rolemodeldelete,item.id,item.name)
}
// 回到上一页的刷新方法
const refreshdelete=()=>{
  const page = fenyeref.value.page
  if(page >1 && tableData.value.length ===1){
    fenyeref.value.changeoption({page:page-1})
  }
  fenyeref.value.changeoption({})
}

// 点击新建
const createFunc = () => {
  modalref.value.init("add")
}
// 点击重置
const resetFunc = () => {
  guiling(formValue.value)
  fenyeref.value.changeoption({page: 1,})
}
// 点击搜索
const searchFunc = () => {
  console.log("点击查询", formValue.value)
  fenyeref.value.changeoption({page: 1,})
}
// 获取数据
const getDataList = (fenye) => {
  const config = {
    p: fenye.page,
    psize: fenye.pageSize,
  }
  Object.keys(formValue.value).forEach(item => {
    config[item] = formValue.value[item]
  })
  http.rolemodellist(config).then(({data}) => {
    if (data.code === 0) {
      tabledata.value = data.items
      total.value = data.total || 1
    }
  })
}

// 弹窗回调刷新
const shauxin=()=>{
  fenyeref.value.changeoption({})
}
// 生命周期区域
</script>

<style scoped>

</style>
